<template>
   
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>

        <el-button
          style="float: right; margin-right: 15px"
          @click="addDialogVisible = true"
          size="small"
          type="success"
        >
          新增
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="searchPeopleList"
          size="small"
          label-width="140px"
        >
          <!-- <el-form-item label="用户ID:">
            <el-input
              style="width: 203px"
              v-model="searchPeopleList.id"
              placeholder="请输入要搜索的用户ID"
              clearable
            ></el-input>
          </el-form-item> -->

          <el-form-item label="姓名:">
            <el-input
              style="width: 203px"
              v-model="searchPeopleList.name"
              placeholder="请输入要搜索的姓名"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="性别:">
            <el-select
              v-model="searchPeopleList.sex"
              style="width: 203px"
              placeholder="请选择要搜索的性别"
              clearable
            >
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="账号状态:">
            <el-select
              v-model="searchPeopleList.status"
              style="width: 203px"
              placeholder="请选择要搜索的账号状态"
              clearable
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系方式:">
            <el-input
              style="width: 203px"
              v-model="searchPeopleList.phone"
              placeholder="请输入要搜索的联系方式"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-dialog title="添加人员" :visible.sync="addDialogVisible" width="60%">
      <span>
        <el-card class="filter-container" shadow="never">
          <div style="margin-top: 15px">
            <el-form
              :rules="staffRules"
              ref="addPeople"
              :inline="true"
              :model="addPeople"
              size="small"
              label-width="140px"
            >
              <el-form-item label="家庭地址:" prop="address">
                <el-input
                  style="width: 203px"
                  v-model="addPeople.address"
                  placeholder="请输入员工家庭地址"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="出生日期:" prop="birth">
                <el-date-picker
                  v-model="addPeople.birth"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择出生日期"
                >
                </el-date-picker>
              </el-form-item>

              <!-- <el-form-item label="公司ID:">
                <el-input
                  style="width: 203px"
                  v-model="addPeople.companyId"
                  placeholder="请输入公司ID"
                  clearable
                ></el-input>
              </el-form-item> -->

              <el-form-item label="邮箱:" prop="email">
                <el-input
                  style="width: 203px"
                  v-model="addPeople.email"
                  placeholder="请输入电子邮箱"
                  clearable
                ></el-input>
              </el-form-item>

              <!-- <el-form-item label="员工人脸url:">
                <el-input
                  style="width: 203px"
                  v-model="addPeople.faceUrl"
                  placeholder="请输入员工人脸url"
                  clearable
                ></el-input>
              </el-form-item> -->

              <el-form-item label="服务标签:" prop="labelId">
                <el-select
                  style="width: 203px"
                  v-model="addPeople.labelId"
                  placeholder="请选择服务标签"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in serviceNameOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="员工姓名:" prop="name">
                <el-input
                  style="width: 203px"
                  v-model="addPeople.name"
                  placeholder="请输入员工姓名"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="账号密码:" prop="password">
                <el-input
                  style="width: 203px"
                  v-model="addPeople.password"
                  placeholder="请输入员工账号密码"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="员工电话号码:" prop="phone">
                <el-input
                  style="width: 203px"
                  v-model="addPeople.phone"
                  placeholder="请输入员工电话号码"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="员工薪水:" prop="salary">
                <el-input
                  style="width: 203px"
                  v-model="addPeople.salary"
                  placeholder="请输入员工薪水"
                  clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="性别:" prop="sex">
                <el-select
                  v-model="addPeople.sex"
                  style="width: 203px"
                  placeholder="请选择员工性别"
                  clearable
                >
                  <el-option label="女" value="WOMAN"></el-option>
                  <el-option label="男" value="MAN"></el-option>
                  <el-option label="保密" value="SECRET"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="类型:" prop="type">
                <el-select
                  v-model="addPeople.type"
                  style="width: 203px"
                  placeholder="请选择员工类型"
                  clearable
                >
                  <el-option label="管理员" value="ADMIN"></el-option>
                  <el-option label="客服" value="CALL"></el-option>
                  <el-option label="普通员工" value="STAFF"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddList()">确 定</el-button>
      </span>
    </el-dialog>

    <el-card style="margin-top: 15px" class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div style="margin-top: 15px" class="table-container">
      <el-table
        :data="PeopleList"
        style="width: 100%"
        v-loading="listLoading"
        border
      >
        <el-table-column label="地址" width="150" align="center">
          <template slot-scope="scope">{{ scope.row.address }}</template>
        </el-table-column>
        <el-table-column label="公司用户ID" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.companyUserId }}</template>
        </el-table-column>
        <el-table-column label="性别" width="100" align="center">
          <template slot-scope="scope">
            <!-- {{ scope.row.user.sex }} -->
            <el-tag type="info" v-if="scope.row.sex == 'SECRET'">保密</el-tag>
            <el-tag type="" v-if="scope.row.sex == 'MAN'">男性</el-tag>
            <el-tag type="danger" v-if="scope.row.sex == 'WOMAN'">女性</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="生日" width="150" align="center">
          <template slot-scope="scope">{{
            formatDate(scope.row.birth)
          }}</template>
        </el-table-column>
        <el-table-column label="更新时间" width="100" align="center">
          <template slot-scope="scope">{{
            formatDate(scope.row.updateTime)
          }}</template>
        </el-table-column>
        <el-table-column label="薪资" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.salary }}</template>
        </el-table-column>
        <el-table-column label="账号类型" width="100" align="center">
          <template slot-scope="scope">
            <!-- {{ scope.row.type }} -->
            <el-tag type="danger" v-if="scope.row.type == 'ADMIN'"
              >管理员</el-tag
            >
            <el-tag type="warning" v-else-if="scope.row.type == 'CALL'"
              >客服</el-tag
            >
            <el-tag type="warning" v-else-if="scope.row.type == 'STAFF'"
              >普通员工</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="服务标签" width="100" align="center">
          <template slot-scope="scope">{{
            getServiceName(scope.row.labelId)
          }}</template>
        </el-table-column>
        <el-table-column label="创建时间" width="100" align="center">
          <template slot-scope="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="联系电话" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.phone }}</template>
        </el-table-column>
        <el-table-column label="姓名" width="150" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>

        <el-table-column label="邮箱" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.email }}</template>
        </el-table-column>

        <el-table-column label="账号状态" width="100" align="center">
          <template slot-scope="scope">
            <!-- {{ scope.row.status }} -->
            <el-tag type="danger" v-if="scope.row.status == 'DELETE'"
              >删除</el-tag
            >
            <el-tag type="warning" v-else-if="scope.row.status == 'BAN'"
              >禁用</el-tag
            >
            <el-tag type="" v-else-if="scope.row.status == 'NORMAL'"
              >正常</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <!-- 人员详情按钮 -->
            <el-button
              size="mini"
              type="success"
              @click="
                (messageDialogVisible = true), showStaffData(scope.$index)
              "
              >人员详情
            </el-button>
            <!-- 状态修改按钮 -->
            <el-button
              size="mini"
              type="primary"
              @click="
                (statusEditDialogVisible = true),
                  showStatusData(scope.$index, scope.row)
              "
              >修改信息
            </el-button>
            <!-- 删除按钮 -->
            <el-button
              size="mini"
              type="warning"
              @click="handleDeleteList(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 账号状态编辑弹窗 -->
      <el-dialog
        title="账号信息编辑"
        :visible.sync="statusEditDialogVisible"
        width="35%"
      >
        <span>
          <el-card class="filter-container" shadow="never">
            <div style="margin-top: 15px">
              <el-form
                :rules="staffRules"
                ref="editStatus"
                :inline="true"
                :model="editStatus"
                size="small"
                label-width="140px"
              >
                <el-form-item label="账号状态:" prop="status">
                  <el-select
                    v-model="editStatus.status"
                    style="width: 203px"
                    placeholder="请选择账号状态"
                    clearable
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="服务标签:" prop="labelId">
                  <el-select
                    style="width: 203px"
                    v-model="editStatus.labelId"
                    placeholder="请选择服务标签"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in serviceNameOptions"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="地址:" prop="address">
                  <el-input
                    style="width: 203px"
                    v-model="editStatus.address"
                    placeholder="请输入地址"
                    clearable
                  ></el-input>
                </el-form-item>

                <el-form-item label="电子邮件:" prop="email">
                  <el-input
                    style="width: 203px"
                    v-model="editStatus.email"
                    placeholder="请输入邮件"
                    clearable
                  ></el-input>
                </el-form-item>

                <el-form-item label="电话号码:" prop="phone">
                  <el-input
                    style="width: 203px"
                    v-model="editStatus.phone"
                    placeholder="请输入电话号码"
                    clearable
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="statusEditDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleEditStatus()"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 人员详情 -->
      <el-dialog
        title="账号详情"
        :visible.sync="messageDialogVisible"
        width="60%"
      >
        <span>
          <el-card class="filter-container" shadow="never">
            <div style="margin-top: 15px">
              <el-form
                :inline="true"
                :model="detail"
                size="small"
                label-width="140px"
              >
                <el-form-item label="地址:">
                  <el-input
                    v-model="detail.address"
                    style="width: 203px"
                    disabled
                  ></el-input>
                </el-form-item>

                <el-form-item label="公司用户ID:">
                  <el-input
                    v-model="detail.companyUserId"
                    style="width: 203px"
                    disabled
                  ></el-input>
                </el-form-item>

                <el-form-item label="性别:">
                  <el-tag
                    type="info"
                    style="width: 203px"
                    v-if="detail.sex == 'SECRET'"
                    >保密</el-tag
                  >
                  <el-tag
                    type=""
                    style="width: 203px"
                    v-if="detail.sex == 'MAN'"
                    >男性</el-tag
                  >
                  <el-tag
                    type="danger"
                    style="width: 203px"
                    v-if="detail.sex == 'WOMAN'"
                    >女性</el-tag
                  >
                </el-form-item>
                <el-form-item label="生日:">
                  <el-date-picker
                    v-model="detail.birth"
                    type="datetime"
                    style="width: 203px"
                    value-format="timestamp"
                    :default-time="['00:00:00']"
                    disabled
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="更新时间:">
                  <el-date-picker
                    v-model="detail.updateTime"
                    type="datetime"
                    style="width: 203px"
                    value-format="timestamp"
                    :default-time="['00:00:00']"
                    disabled
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="薪资:">
                  <el-input
                    v-model="detail.salary"
                    style="width: 203px"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="账号类型:">
                  <el-tag
                    type="danger"
                    style="width: 203px"
                    v-if="detail.type == 'ADMIN'"
                    >管理员</el-tag
                  >
                  <el-tag
                    type="warning"
                    style="width: 203px"
                    v-else-if="detail.type == 'CALL'"
                    >客服</el-tag
                  >
                  <el-tag
                    type="warning"
                    style="width: 203px"
                    v-else-if="detail.type == 'STAFF'"
                    >普通员工</el-tag
                  >
                </el-form-item>
                <!-- <el-form-item label="labelID:">
                  <el-input
                    v-model="detail.labelId"
                    style="width: 203px"
                    disabled
                  >
                  </el-input>
                </el-form-item> -->
                <el-form-item label="服务标签:">
                  <el-input v-model="labelName" style="width: 203px" disabled>
                  </el-input>
                </el-form-item>

                <el-form-item label="创建时间:">
                  <el-date-picker
                    v-model="detail.createTime"
                    type="datetime"
                    style="width: 203px"
                    value-format="timestamp"
                    :default-time="['00:00:00']"
                    disabled
                  ></el-date-picker>
                </el-form-item>
                <el-form-item label="联系电话:">
                  <el-input
                    v-model="detail.phone"
                    style="width: 203px"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="姓名:">
                  <el-input
                    v-model="detail.name"
                    style="width: 203px"
                    disabled
                  ></el-input>
                </el-form-item>
                <el-form-item label="邮箱:">
                  <el-input
                    v-model="detail.email"
                    style="width: 203px"
                    disabled
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item label="账号密码:">
                  <el-input
                    style="width: 203px"
                    v-model="detail.password"
                    disabled
                  ></el-input>
                </el-form-item> -->
                <el-form-item label="账号状态:">
                  <el-tag
                    type="danger"
                    style="width: 203px"
                    v-if="detail.status == 'DELETE'"
                    >删除</el-tag
                  >
                  <el-tag
                    type="warning"
                    style="width: 203px"
                    v-else-if="detail.status == 'BAN'"
                    >禁用</el-tag
                  >
                  <el-tag
                    type=""
                    style="width: 203px"
                    v-else-if="detail.status == 'NORMAL'"
                    >正常</el-tag
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="text" @click="messageDialogVisible = false"
            >关闭</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!--  -->
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :page-count="pageCunt"
        :current-page.sync="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  name: "userManage",
  data() {
    return {
      // uploadURL: "http://localhost:8080/api/upload/image",
      // requestMethod: "POST",
      searchPeopleList: {
        id: "",
        name: "",
        type: "",
        status: "",
        phone: "",
        email: "",
        pageNum: "1",
        pageSize: "5",
      },
      currentPage: 1,
      currentPeopleList: {
        pageNum: "1",
        pageSize: "5",
      },
      PeopleList: [
        {
          address: "",
          companyUserId: "",
          sex: "",
          birth: "",
          updateTime: "",
          salary: "",
          type: "",
          faceUrl: "",
          labelId: "",
          createTime: "",
          phone: "",
          name: "",
          company: {
            businessLicense: "",
            creditCode: "",
            phone: "",
            contact: "",
            legalPerson: "",
            name: "",
            id: "",
            status: "",
          },
          id: "",
          email: "",
          status: "",
        },
      ],
      addPeople: {
        address: "",
        birth: "",
        companyId: "",
        email: "",
        faceUrl: "",
        labelId: "",
        name: "",
        password: "",
        phone: "",
        salary: "",
        sex: "",
        type: "",
      },
      labelName: "",
      detail: {},
      editMessage: {
        name: "",
        type: "",
        status: "",
        phone: "",
        email: "",
      },
      editStatus: {
        address: "",
        phone: "",
        email: "",
        labelId: "",
        companyUserId: "",
        status: "",
      },
      statusOptions: [
        {
          value: "BAN",
          label: "禁用",
        },
        {
          value: "DELETE",
          label: "删除",
        },
        {
          value: "NORMAL",
          label: "正常",
        },
      ],
      sexOptions: [
        {
          value: "WOMAN",
          label: "女性",
        },
        {
          value: "MAN",
          label: "男性",
        },
        {
          value: "SECRET",
          label: "保密",
        },
      ],
      serviceNameOptions: [{ name: "", id: "", status: "" }],
      dialogAddVisible: false, //人员新增
      listLoading: true,
      // isAdd: true,
      // isEdit: true,
      addDialogVisible: false,
      messageDialogVisible: false, //人员详情
      pageCunt: 1,
      statusEditDialogVisible: false,
      editStatusRules: {},
      staffRules: {
        address: [
          { required: true, message: "请输入地址", trigger: "blur" },
          { min: 2, message: "地址至少包含两个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮件地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入有效的电子邮件地址",
            trigger: ["blur", "change"],
          },
        ],
        salary: [
          { required: true, message: "请输入员工薪水", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value === "" || !isNaN(value)) {
                callback();
              } else {
                callback(new Error("薪水必须为数字类型"));
              }
            },
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { len: 11, message: "请输入 11 位电话号码", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        type: [
          {
            required: true,
            message: "请选择身份类型",
            trigger: "blur",
          },
        ],
        labelId: [
          { required: true, message: "请选择服务标签", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, message: "姓名至少包含两个字符", trigger: "blur" },
        ],
        birth: [{ required: true, message: "请填写出生日期", trigger: "blur" }],
      },
      // editStatusRules: {
      //   status: [{ required: true, message: "请输入账号ID", trigger: "blur" }],
      // },
    };
  },
  created() {
    this.getList();
    this.getserviceNameOptions();
  },
  computed: {
    // 计算属性：将服务标签ID转换为对应的服务名称
    getServiceName() {
      return (labelId) => {
        const matchingService = this.serviceNameOptions.find(
          (service) => service.id == labelId
        );
        return matchingService ? matchingService.name : "";
      };
    },
  },
  methods: {
    formatDate(timestamp) {
      // return moment(timestamp).format("YYYY-MM-DD HH:mm:ss"); // 使用 moment.js 格式化日期时间字符串
      return moment(timestamp).format("YYYY-MM-DD"); // 使用 moment.js 格式化日期时间字符串
    },
    getList() {
      this.listLoading = true;
      this.axios
        .get("api/company/auth/user/list", {
          params: this.currentPeopleList,
        })
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.PeopleList = response.data.value.data;

            if (
              response.data.value.total / 5 >
              Number.parseInt(response.data.value.total / 5)
            ) {
              this.pageCunt =
                Number.parseInt(response.data.value.total / 5) + 1;
            } else {
              this.pageCunt = Number.parseInt(response.data.value.total / 5);
            }
            this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },

    // 搜索
    handleSearchList() {
      this.listLoading = true;
      this.axios
        .get("api/company/auth/user/list", {
          params: this.searchPeopleList,
        })
        .then((response) => {
          if (response.data.code == "200") {
            this.PeopleList = response.data.value.data;
            var pcnt = response.data.value.total / 5;
            if (pcnt > Number.parseInt(pcnt)) {
              this.pageCunt = Number.parseInt(pcnt) + 1;
            } else {
              this.pageCunt = Number.parseInt(pcnt);
            }
            this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    // 重置搜索条件
    handleResetSearch() {
      this.searchPeopleList = {
        id: "",
        name: "",
        phone: "",
        sex: "",
        status: "",
        pageNum: "1",
        pageSize: "5",
      };
    },
    // 换页
    handleCurrentChange(val) {
      this.listLoading = true;
      this.currentPeopleList.pageNum = val;
      this.axios
        .get("api/company/auth/user/list", {
          params: this.currentPeopleList,
        })
        .then((response) => {
          if (response.data.code == "200") {
            this.PeopleList = response.data.value.data;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    // 新增服务信息
    handleAddList() {
      // console.log(this.addPeople.sex);
      this.$refs.addPeople.validate((valid) => {
        if (valid) {
          this.$confirm("请再次确认是否添加").then(() => {
            this.axios
              .post(
                "/api/company/auth/user/insert?address=" +
                  this.addPeople.address +
                  "&birth=" +
                  this.addPeople.birth +
                  "&email=" +
                  this.addPeople.email +
                  "&faceUrl=" +
                  this.addPeople.faceUrl +
                  "&labelId=" +
                  this.addPeople.labelId +
                  "&name=" +
                  this.addPeople.name +
                  "&password=" +
                  this.addPeople.password +
                  "&phone=" +
                  this.addPeople.phone +
                  "&salary=" +
                  this.addPeople.salary +
                  "&sex=" +
                  this.addPeople.sex +
                  "&type=" +
                  this.addPeople.type
              )
              .then((response) => {
                if (response.data.code == "200") {
                  this.$message({
                    message: "添加成功",
                    type: "success",
                  });
                  this.getList();
                } else {
                  this.$message.error(response.data.message);
                }
              })
              .catch((error) => {
                this.$message.error("添加失败");
              });
          });
          // this.$refs.addPeople.resetFields();
          this.addDialogVisible = false;
        } else {
          this.$message.error("请填写带*字段并按照要求填写");

          // return false;
        }
      });
    },
    // 人员详情
    showStaffData(index) {
      this.detail = { ...this.PeopleList[index] };
      this.labelName = this.getServiceName(this.detail.labelId);
    },
    // 删除离职人员
    handleDeleteList(row) {
      this.$confirm("请再次确认是否删除").then(() => {
        this.axios
          .post(
            "/api/company/auth/user/delete?companyUserId=" + row.companyUserId
          )
          .then((response) => {
            console.log(response);
            if (response.data.code == "200") {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getList();
            } else {
              this.$message.error(response.data.message);
            }
          })
          .catch((error) => {
            this.$message.error("删除失败");
          });
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    showStatusData(index) {
      this.editStatus = { ...this.PeopleList[index] };
    },
    // 状态修改
    handleEditStatus() {
      // editStatus
      this.$refs.editStatus.validate((valid) => {
        if (valid) {
          this.$confirm("请再次确认是否选择修改").then(() => {
            this.axios
              .post(
                "/api/company/auth/user/update?companyUserId=" +
                  this.editStatus.companyUserId +
                  "&status=" +
                  this.editStatus.status +
                  "&address=" +
                  this.editStatus.address +
                  "&email=" +
                  this.editStatus.email +
                  "&phone=" +
                  this.editStatus.phone +
                  "&labelId=" +
                  this.editStatus.labelId
              )
              .then((response) => {
                if (response.data.code == "200") {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  this.getList();
                  this.statusEditDialogVisible = false;
                } else {
                  this.$message.error(response.data.message);
                }
              })
              .catch((error) => {
                this.$message.error("修改失败");
              });
          });
        } else {
          this.$message.error("请按照要求修改信息");
        }
      });
    },
    // 获取服务列表
    // /api/company/auth/server/list
    getserviceNameOptions() {
      this.axios
        .get("/api/company/auth/label/getByCompany")
        .then((response) => {
          if (response.data.code == "200") {
            // console.log(response);
            // this.ServiceList = response.data.value.data;
            this.serviceNameOptions = response.data.value;
            this.serviceNameOptions = this.serviceNameOptions.filter(function (
              item
            ) {
              if (item.status == "NORMAL") return item;
            });
            console.log(response);
          } else {
            this.$message.error(response.data.message);
          }
          // this.listLoading = false;
        })
        .catch((error) => {
          this.message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    // getserviceNameOptions() {
    //   this.axios
    //     .get("api/company/auth/label/list")
    //     .then((response) => {
    //       if (response.data.code == "200") {
    //         // this.ServiceList = response.data.value.data;
    //         this.serviceNameOptions = response.data.value;
    //         this.serviceNameOptions = this.serviceNameOptions.filter(function (
    //           item
    //         ) {
    //           if (item.status == "NORMAL") return item;
    //         });
    //         // console.log(response);
    //       } else {
    //         this.$message.error(response.data.message);
    //       }
    //       // this.listLoading = false;
    //     })
    //     .catch((error) => {
    //       this.message.error("无法获取数据");
    //       this.listLoading = false;
    //     });
    // },
  },
};
</script>
<style></style>
